<template>
    <div>
        <div class="flex w-full align-items-center flex-wrap form-input form-input-bordered">
            <div class="flex flex-wrap">
                <div class="bg-primary text-white rounded-full label-item-container" v-for="tag in totalTags">
                    <div class="inline whitespace-no-wrap  overflow-hidden select-none label-item-content">{{tag}}
                    </div>
                    <span class="label-item-close" @click="deleteCustomTag(tag)">×</span>
                </div>
            </div>
            <div class="flex-1 my-2 input-tag-container">

                <input class="border-none outline-none w-full" type="text"
                       placeholder="按空格键Space创建标签" v-model="customInputContent" @keyup.space="setCustomTag"
                >

            </div>

            <p class="my-2 tag-tip">还可以添加{{remainTagsLength}}个标签</p>
        </div>
        <input type="hidden" :name="fieldName" :value="tagsValue">
        <!--推荐标签-->
    </div>
</template>

<script>
    export default {
        name: "TigTagField",
        props: {
            fieldName: {require: true, type: String, default: 'tags'}, tags: {type: Array, default: () => []}
        },
        data: function () {
            return {
                max: 10,
                totalTags: [],
                customInputContent: ''
            }
        }, computed: {
            remainTagsLength: function () {

                return this.max - this.totalTags.length;
            },
            tagsValue: function () {
                return JSON.stringify(this.totalTags);
            }
        }, methods: {
            setCustomTag: function (t) {
                var that = this;
                let tag = this.customInputContent.trim();
                this.customInputContent = tag;
                if (!tag) {
                    this.$toasted.error("您没有输入任何字符");
                    return null;
                }
                if (this.remainTagsLength <= 0) {
                    this.$toasted.error("允许添加的标签已经达到上限了");
                    return null;
                }
                if (-1 !== this.totalTags.indexOf(tag)) {
                    this.$toasted.error("该输入标签已经存在");
                    return null;
                }
                this.totalTags.push(tag);
                this.customInputContent = '';
            },
            deleteCustomTag: function (tag) {
                this.totalTags = _.without(this.totalTags, tag);
            },
        }, mounted: function () {
            this.totalTags = this.tags;
        }
    }
</script>

<style scoped>
    .input-tag-container {
        min-width: 200px;
    }

    .label-item-container {
        margin: 4px 6px 4px 0;
        padding: 0 9px 0 11px;

    }

    .label-item-content {
        line-height: 30px;
        font-size: 14px;
        max-width: 240px;
        text-overflow: ellipsis;
    }

    .label-item-close {
        cursor: pointer;
    }

    .tag-tip {
        cursor: default;
    }
</style>